<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //等待文档 加载完成后再执行
        window.onload = function () {

            //获取Element对象 通过document对象的方法来获取到元素（标签）

            //1.根据id属性值获取某个元素
            var div = document.getElementById("box01");
            // alert(div.innerHTML);//html内容

            //2.根据Class属性值获取多个元素 数组
            var lis = document.getElementsByClassName("item");
            //alert(lis[0].innerHTML);

            //3.根据元素名称 获取多个元素  数组
            var aa = document.getElementsByTagName("li");

            //4.根据标签的name属性获取多个元素  数组
            var names = document.getElementsByName("username");


            //html5提出两种获取元素的方法  选择器
            //获取满足选择器的第一个元素
            var box = document.querySelector("#box01");
            // box.style.color = "red";
            alert(box.innerHTML);

            document.querySelector(".item");

            //获取满足选择器条件的所有元素 数组
            document.querySelectorAll(".item");

            //特殊
            //获取body
            document.body;
            document.documentElement;//获取html元素

        }




    </script>
</head>

<body>
    <div id="box01">
        <span>我是div中的span</span>
    </div>

    <ul class="list">
        <li class="item">11</li>
        <li class="item">22</li>
        <li class="item">33</li>
        <li class="item">44</li>
        <li class="item">55</li>
    </ul>

    <input type="text" name="username">
    <input type="text" name="username">
    <input type="text" name="username">

</body>

</html>